<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .demo{
        width:5rem;
        height: 1.25rem;
        background: red;
    }
    #app{
        width:10rem;
        margin-left: auto;
        margin-right: auto;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="demo"></div>
    </div>
    <script>
    // 布局视口的width
    var vw=document.documentElement.clientWidth;
    // 设备width
    var dw=screen.availWidth;
    // 设备像素比
    var dpr=window.devicePixelRatio;
    console.log("vw:"+vw);
    console.log("dw:"+dw);
    console.log("dpr:"+dpr);
    </script>
</body>
</html>